<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title> index </title>
    <link rel="stylesheet" href="layui/dist/css/layui.css">
    <link href="stylesheets/hover.css" rel="stylesheet"/>
    <style>
        .layui-panel {
            border-radius: 10px;
        }


    </style>
</head>
<body class="layui-bg-gray">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header layui-bg-green">
        <div class="layui-logo layui-hide-xs ">
            <div class=" layui-col-md1">
                <img src="images/logo.png" alt="">
            </div>

        </div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav  layui-layout-left">


            <li class="layui-nav-item layui-hide-xs"><a href="/">首页</a></li>

            <li class="layui-nav-item layui-hide-xs"><a href="/about">关于</a></li>

        </ul>
        {{if user}}
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="/profile">
                    <img src="images/avatar.jpg" style="width: 40px;height: 40px;" class="layui-nav-img">


                </a>


            </li>
            <li class="layui-nav-item layui-unselect">

                <a href="/write">
                    <div class="layui-icon layui-icon-add-circle-fine hvr-grow"
                         style="font-size:40px;font-weight: bolder;color: white;margin-left: 20px;">
                    </div>
                </a>

            </li>

        </ul>
        {{else}}
        <ul class="layui-nav layui-layout-right" style="">
            <li class="layui-btn layui-btn-radius layui-btn-normal hvr-grow"><a href="/login">登录</a></li>
            <li class="layui-btn layui-btn-radius layui-btn-primary hvr-grow" style="color: whitesmoke"><a
                    href="/register">注册</a></li>
            <li class="layui-nav-item layui-unselect">

                <a href="/write">
                    <div class="layui-icon layui-icon-add-circle-fine hvr-grow"
                         style="font-size:40px;font-weight: bolder;color: white;margin-left: 20px;">
                    </div>
                </a>

            </li>
        </ul>

<!--把这个/if写到/div下边了，导致无法翻页-->
        {{/if}}
    </div>

    <!--art-template逻辑写的不对会导致http500-->


    <div class="layui-body" id="main" style="height:auto;">
        <!-- 内容主体区域 -->
        <div class="layui-row">
            <i class="layui-icon layui-icon-add-circle layui-circle hvr-grow"style="font-size: 50px;position: fixed;right:50px;top: 575px;background-color: #2ecc71;color: white; box-shadow: 1px 1px 3px #000;"></i>

        </div>

        {{each articles}}
        <div class=" layui-row "  style="margin-top:30px;margin-left: 200px;">
            <div class="layui-col-md8 hvr-grow">
                <div class="layui-panel ">
                    <div class="layui-row ">
                        <div class="layui-col-md3"><img src="{{$value.imgSrc}}"
                                                        style="border-radius:5px;margin-top:10px;margin-bottom:10px;margin-left:10px;"
                                                        width="100" height="100" alt="Alternate Text"/></div>
                        <div class="layui-col-md8">
                            <div class="overview" style="margin-top:20px;">
                                <h1><a href="/article/{{$value.articleID}}">{{$value.articlePreview}}</a></h1>
                                <h3 style="margin-top:10px;font-weight:bold;">
                                    {{$value.articleTitle}}&nbsp&nbsp&nbsp&nbsp{{$value.articleAuthor}}</h3>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>
        {{/each}}

        <div class="layui-row" id="page" style="position:relative;left: 459px;top:35px; "></div>


        <footer style="height:90px;position:relative;width:100%;text-align:center;font-size:2px;">
            <p style="margin-top:50px;margin-right:200px;margin-bottom:10px;">Copyright © 2022 All Rights Reserved</p>
            <p style="margin-bottom:10px;margin-right: 200px;">Powered by Express</p>
            <p style="margin-right: 200px">E-mail:2196933343@qq.com</p>
        </footer>

    </div>


</div>
<script src="layui/dist/layui.js"></script>
<script>
    //JS


    layui.use(['element', 'layer', 'util','laypage'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , laypage = layui.laypage
            , $ = layui.$;

        var url="http://localhost:3000";
//获取url中的query参数
        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }

        laypage.render({
            elem:'page',
            count:6,
            limit:5,
            curr:getQueryVariable("page"),

            jump(obj,first){

                if(!first){
                    location.href=url+'/?page='+obj.curr;
                }
            }
        });

    });
</script>
</body>
</html>
